<template>
    <div class="main-box">
        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="query" ref="query" class="demo-form-inline" size="small">
                <el-form-item label="文章搜索">
                    <el-input placeholder="请输入搜索内容" v-model="query.field_value" class="input-with-select">
                        <el-select v-model="query.field_type" slot="prepend" placeholder="请选择" style="width: 90px;">
                            <el-option label="标题" value="title"></el-option>
                            <el-option label="作者" value="author"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="searchCategoryId" multiple filterable clearable collapse-tags placeholder="请选择"
                        @change="selectCategoryId">
                        <el-option v-for="item in categoryData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchStatus" multiple filterable clearable collapse-tags placeholder="请选择"
                        @change="selectStatus">
                        <el-option label="草稿" value="1">
                        </el-option>
                        <el-option label="发布" value="2">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="clickSearch">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button size="mini" @click="resetForm('query')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div class="btn-box">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">添加</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del">删除</el-button>
        </div>
        <!-- 表格 -->
        <div class="table-list-box">
            <el-table ref="multipleTable" :data="listData" style="width: 100%;" border height="100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column min-width="55" prop="spliderimgurl" label="封面">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.cover_file_info?.url" :preview-src-list="[scope.row.cover_file_info?.url]"
                            style="width: 32px; height: 32px;border-radius: 50%;text-align: center;">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="author" label="作者">
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column>
                <el-table-column prop="category_name" label="分类">
                </el-table-column>
                <el-table-column prop="status_attr" label="状态">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column prop="update_time" label="修改时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-box">
            <el-pagination @current-change="handleCurrentChange" :page-size="query.limit"
                layout="total, prev, pager, next, jumper" :total="listTotal" :current-page="query.page">
            </el-pagination>
        </div>

        <!-- 添加 -->
        <x-add ref="add" @updateList="updateList" />
        <!-- 编辑 -->
        <x-edit ref="edit" @updateList="updateList" />
    </div>
</template>
  
<script>
import { list, del } from '@/api/info/article';
import { getAll } from '@/api/info/articleCategory';
export default {
    name: "list",
    components: {
        'x-add': () => import('./add'),
        'x-edit': () => import('./edit')
    },
    data() {
        return {
            listData: [],
            categoryData: [],
            listTotal: 0,
            query: {
                page: 1,
                limit: 10,
                field_type: '',
                field_value: '',
                status: '',
                category_id: ''
            },
            selectIds: '',
            searchStatus: '',
            searchCategoryId: ''
        }
    },
    mounted() {
        this.getList();
        this.initCategoryData();
    },
    methods: {
        initCategoryData() {
            getAll().then(res => {
                this.categoryData = res.data
            })
        },
        getList() {
            list(this.query).then(res => {
                this.listTotal = res.data.count;
                this.listData = res.data.data
            })
        },
        clickSearch() {
            this.query.page = 1;
            this.getList();
        },
        del() {
            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                del({ 'ids': this.selectIds }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                    if (this.selectIds != '') {
                        var maxCount = this.listTotal - this.selectIds.split(',').length;
                        var maxPage = Math.ceil(maxCount / this.query.limit);
                        if (maxPage < this.query.page) {
                            this.query.page--;
                        }
                    }
                    this.getList();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        add() {
            this.$refs.add.dialogFormVisible = true;
        },
        edit(row) {
            this.$refs.edit.dialogFormVisible = true;
            this.$refs.edit.initData(row);
        },
        handleSelectionChange(val) {
            this.selectIds = val.map(item => item.id).toString();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.query.field_type = 'title';
            this.query.field_value = '';
            this.query.status = '';
            this.query.category_id = '';
            this.searchCategoryId = '';
            this.searchStatus = '';
            this.query.page = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.query.page = page;
            this.getList();
        },
        updateList() {
            this.getList();
        },
        selectCategoryId() {
            this.query.category_id = this.searchCategoryId.join(',')
        },
        selectStatus() {
            this.query.status = this.searchStatus.join(',')
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
    }
}
</script>
  
<style lang="less" scoped>
.main-box {
    background-color: white;
    height: 100%;
    padding: 15px 30px;
    box-sizing: border-box;

    .table-list-box {
        margin-top: 15px;
        height: calc(100% - 140px);
        overflow: auto;

        .head-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            text-align: center;
        }
    }

    .page-box {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>